<template>
  <el-form label-width="100px">
    <el-form-item label="SPU名称"> {{skuParams.spuName}} </el-form-item>
    <el-form-item label="SKU名称">
      <el-input
        placeholder="请输入sku名称"
        v-model="skuParams.skuName"
      ></el-input>
    </el-form-item>
    <el-form-item label="价格(元)">
      <el-input type="number" placeholder="请输入价格" v-model="skuParams.price"></el-input>
    </el-form-item>
    <el-form-item label="重量(千克)">
      <el-input placeholder="请输入重量" v-model="skuParams.weight"></el-input>
    </el-form-item>
    <el-form-item label="规格描述">
      <el-input
        type="textarea"
        placeholder="请输入规格描述"
        v-model="skuParams.skuDesc"
      ></el-input>
    </el-form-item>
    <el-form-item label="平台属性">
      <el-form :inline="true" label-width="70px">
        <el-form-item
          :label="attr.attrName"
          v-for="(attr, index) in attrArr"
          :key="attr.id"
          style="margin: 5px 10px"
        >
          <el-select
            v-model="attr.attrIdAndValueId"
            placeholder="请选择"
            clearable
          >
            <el-option
              :value="`${attr.id}:${item.id}`"
              :label="item.valueName"
              v-for="(item, index) in attr.attrValueList"
              :key="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-form-item>
    <el-form-item label="销售属性">
      <el-form :inline="true" label-width="70px">
        <el-form-item
          :label="sale.saleAttrName"
          v-for="(sale, index) in salesArr"
          :key="sale.id"
          style="margin: 5px 10px"
        >
          <el-select
            v-model="sale.saleIdAndValueId"
            placeholder="请选择"
            clearable
          >
            <el-option
              :value="`${sale.id}:${item.id}`"
              :label="item.saleAttrValueName"
              v-for="(item, index) in sale.spuSaleAttrValueList"
              :key="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-form-item>
    <el-form-item label="图片列表">
      <el-table border stripe :data="imgArr" ref="tableRef">
        <el-table-column
          type="selection"
          width="60"
          align="center"
        ></el-table-column>
        <el-table-column label="图片">
          <template #="{ row, $index }">
            <img :src="row.imgUrl" alt="" style="width: 80; height: 100px" />
          </template>
        </el-table-column>
        <el-table-column label="名称" prop="imgName"> </el-table-column>
        <el-table-column label="操作">
          <template #="{ row, $index }">
            <el-button type="success" size="small" v-if="row.isChecked == 1"
              >默认</el-button
            >
            <el-button
              type="primary"
              size="small"
              v-else
              @click="changeChecked(row)"
              >设置为默认</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" size="default" @click="save">保存</el-button>
      <el-button @click="cancel">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { reqAttrList } from "@/api/product/attr/attr";
import { reqAddSku, reqHadSalesAttr, reqImgList } from "@/api/product/spu/spu";
import { ElMessage } from "element-plus";
import { ref, nextTick } from "vue";

// 定义存储数据
// 平台属性数据
let attrArr = ref([]);
// 销售属性数据
let salesArr = ref([]);
// 照片墙数据
let imgArr = ref([]);
// 定义要发送给服务器的数据
let skuParams = ref<any>({
  //父组件传递过来参数
  category3Id: 0, //三级分类的ID
  spuId: 0, //SPU的ID
  tmId: 0, //spu的品牌的ID
  spuName:'',//spu的名字
  //v-model收集
  skuName: "", //sku的名字
  price: 0, //sku的价格
  weight: "", //sku的重量
  skuDesc: "", //sku的描述

  skuDefaultImg: "", //默认图片地址
  skuAttrValueList: [
    //平台属性
    // {
    //   attrId: 0, //属性的id
    //   valueId: 0, //属性值的ID
    // },
  ],
  skuSaleAttrValueList: [
    //销售属性
    // {
    //   saleAttrId: 0,
    //   saleAttrValueId: 0,
    // },
  ],
});

// 获取table组件实例
let tableRef = ref();
// 定义方法,让父组件调用
const initSku = async (c1Id, c2Id, row) => {
  // 整理数据 注:整理数据时一定要确认 k 和 v 一致,不要想当然,确认数据之后再写!!
  skuParams.value.category3Id = row.category3Id;
  skuParams.value.spuId = row.id;
  skuParams.value.tmId = row.tmId;
  // 存一下spu的名字,注:发请求时该参数不是服务器必需的数据,只是页面需要的数据
  skuParams.value.spuName = row.spuName
  // 平台属性
  let res = await reqAttrList(c1Id, c2Id, row.category3Id);
  //  销售属性
  let res1 = await reqHadSalesAttr(row.id);
  // 照片墙
  let res2 = await reqImgList(row.id);
  // 存储数据
  attrArr.value = res;
  salesArr.value = res1;
  imgArr.value = res2;
  // 判断数组长度
  if (imgArr.value.length == 0) return;
  // 让数组第一项默认选中
  imgArr.value[0].isChecked = 1;
  // 默认第一项被选中
  nextTick(() => {
    tableRef.value.toggleRowSelection(imgArr.value[0], true);
    skuParams.value.skuDefaultImg = imgArr.value[0].imgUrl;
  });
  // 给数组每一项都添加一个isChecked属性
  for (var i = 1; i < imgArr.value.length - 1; i++) {
    imgArr.value[i].isChecked = 0;
  }
};

// 对外暴露方法
defineExpose({
  initSku,
});

// 切换选中状态的回调
const changeChecked = (row) => {
  // 全部的都变为未选中
  imgArr.value.forEach((item) => {
    item.isChecked = 0;
    tableRef.value.toggleRowSelection(item, false);
  });
  // 选中的变为 1
  row.isChecked = 1;
  // tabel组件实例的方法,可以更改选中状态
  tableRef.value.toggleRowSelection(row, true);
  // 收集服务器的默认图片数据
  skuParams.value.skuDefaultImg = row.imgUrl;
};

// 点击保存的回调
const save = async() => {
  // 整理参数
  // 平台属性
  skuParams.value.skuAttrValueList = attrArr.value.reduce((prev, next) => {
    // 判断用户是否选择了某属性
    if (next.attrIdAndValueId) {
      const [attrId, valueId] = next.attrIdAndValueId.split(":");
      prev.push({ attrId, valueId });
    }
    // 必须return,否则就是undefined,因为reduce方法的返回值是最新的结果值
    return prev;
  }, []);
  // 销售属性
  skuParams.value.skuSaleAttrValueList = salesArr.value.reduce((prev, next) => {
    // 判断用户是否选择了某属性
    if (next.saleIdAndValueId) {
      const [saleAttrId, saleAttrValueId] = next.saleIdAndValueId.split(":");
      prev.push({ saleAttrId, saleAttrValueId });
    }
    return prev;
  }, []);
  // 发请求
  try {
    await reqAddSku(skuParams.value)
    // 提示信息
    ElMessage({
      type:'success',
      message:'添加SKU成功'
    })
    // 切换场景
    emit('changeScene',{scenes:0,whichOne:''})
    // 清空数据
    resetData()
  } catch (error) {
    ElMessage({
      type:'success',
      message:'添加SKU成功'
    })
  }
};

// 点击取消的回调
const cancel = ()=>{
  // 切换场景为 0
  emit('changeScene',{scenes:0,whichOne:''})
  // 清空数据
  resetData()
}

// 定义清空数据的方法
const resetData = ()=>{
  // 清空相关数据:基本属性 平台属性 销售属性
  skuParams.value = []
  attrArr.value = []
  salesArr.value = []
}

// 自定义方法记得用一个变量接收,这样才能使用这个变量
let emit = defineEmits(['changeScene'])
</script>

<style scoped>
</style>